<%@ page pageEncoding="UTF-8"%>
<%@ include file="/common/validate.jsp"%>
<%@ include file="../function.jsp" %>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>编辑医生</title>
    <link  href="../../images/favicon.ico?cache=<%=Math.random()%>" rel="shortcut icon" type="image/x-icon">
    <link href="https://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="../../css/public.css?cache=<%=Math.random()%>">
    <link rel="stylesheet" href="../../css/messages_doctor_mes_add.css?cache=<%=Math.random()%>">
    <link rel="stylesheet" href="/css/sweetalert.css?cache=<%=Math.random()%>" >
    <script src="../../js/jquery-1.9.1.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <link href="/css/editor/summernote.css" rel="stylesheet">
    <script src="/css/editor/summernote.js"></script>
</head>
<body>
<%@ include file="../../header.jsp"%>
<!--内容-->
<div class="containerone">
    <%@ include file="../../left_menu.jsp"%>
    <!--右边内容-->
    <div class="right_cont">
        <div id="app">
            <doctor></doctor>
        </div>
        <script type="x-template" id="doctor">
            <div class="message_right_cont_box" id="edit_doctor">
                <div>
                    <div class="message_right_cont_container">
                        <div class="add_doctor">
                            <span>编辑医生</span>
                            <button class="back_doctor_mes" @click="back()">返回</button>
                        </div>
                        <%--添加医生开始--%>
                        <%--医生基本信息开始--%>
                        <p class="img_tip">点击图片即可修改医生头像</p>
                        <div class='mes_add'>
                            <div class='mes_add_image'>
                                <input type="file" class='mes_add_image_input'>
                                <div class="doctor_up_load_img" id="99">
                                    <%--头像--%>
                                    <img :src="doctor_detail.head_image">
                                </div>
                            </div>
                            <div class='mes_edit_input'>
                                <ul class='mes_edit_input_ul'>
                                    <li>
                                        <span>医生工号：</span><span v-html="doctor_detail.expertId"></span>
                                    </li>
                                    <li><span class="inline_margin_left">医生科室：</span><span v-html="doctor_detail.deptName"></span></li>
                                    <li class="ui_float doc_name"><span>医生姓名:</span><input class="doc_name_input" type="text" name="name" v-model="doctor_detail.name"></li>
                                    <li class="ui_float"><span>医生级别:</span><input name='level' name="level" type="text" value="" v-model="doctor_detail.title"></li>
                                    <li>
                                        <p>
                                            <span>医生性别:</span>
                                            <select class="doc_edi_sel" id="sex" v-model="doctor_detail.sex" >
                                                <option value="0" >女</option>
                                                <option value="1" >男</option>
                                            </select>
                                        </p>
                                        <p class="margin-left_ten">
                                            <span>是否是专家:</span>
                                            <select  class="doc_edi_sel" id="isExpert" v-model="doctor_detail.isExpert" @change="change_a()">
                                                <option value="0"  >否</option>
                                                <option value="1" >是</option>
                                            </select>
                                        </p>
                                        <%--如果time为0这里隐藏--%>
                                        <p class="margin-left_ten doctor_time" >
                                            <span>门诊时间:</span>
                                            <input name='time' v-model="doctor_detail.time" type="text" value="">
                                        </p>
                                    </li>
                                </ul>
                            </div>
                            <div class='clearfix'></div>
                        </div>
                        <%--医生基本信息结束--%>
                        <%--医生擅长开始--%>
                        <div class='doc_good_at'>
                            <div class='doc_good_at_tip'><span>医生擅长:</span>(限输入500字符)</div>
                            <div class='doc_good_at_textarea'>
                       <textarea name="specialty" v-model="doctor_detail.specialty"  id="" style="width:900px;height:100px;" maxlength="500" >
                       </textarea>
                            </div>
                        </div>
                        <%--医生擅长结束--%>
                        <%--医生介绍开始--%>
                        <div class='doc_good_at'>
                            <div class='doc_good_at_tip'><span>医生介绍:</span></div>
                            <div style="width:900px;">
                                <div id="editor" ></div>
                            </div>
                        </div>
                        <%--医生介绍结束--%>


                        <%--医生编辑取消和确定开始--%>
                        <div class="add_doctor_cancel_sure">
                            <span class="message_giveup span_give_up" @click="back()">取消</span>
                            <span class="message_save message_sure" id="h_message_save" @click="submit()">确定</span>
                        </div>
                        <div class="clearfix"></div>
                        <%--医生编辑取消和确定结束--%>
                    </div>
                </div>
            </div>
        </script>
    </div>
    <script src="/js/sweetalert-dev.js"></script>
    <script src="../../js/jquery.selectlist.js?cache=<%=Math.random()%>"></script>
    <script type="text/javascript">
        var doctor={
            template:"#doctor",
            data:function(){
                return{
                    data:{
                        doctor_detail:[],
                    },
                }
            },
            ready:function(){
                var self = this;
                $(document).ready(function() {
                    $('#editor').summernote({
                        height:260,
                        lang:'zh-CN',
                        callbacks: {
                            onImageUpload: function(files) {
                                // upload image to server and create imgNode...
                                var img = localImg(files[0]);
                            }
                        }
                    });
                });
                function localImg(file) {
                    var xmlhttprequest;
                    var form = new FormData();
                    form.append("file", file);
                    if (window.XMLHttpRequest) {
                        xmlhttprequest = new XMLHttpRequest();
                        if (xmlhttprequest.overrideMimeType) {
                            xmlhttprequest.overrideMimeType("text/xml");
                        }
                    }
                    xmlhttprequest.open("POST", "http://cloud.eeesys.com/pu/upload.php", true);
                    xmlhttprequest.onreadystatechange = callback.bind(this);
                    xmlhttprequest.send(form);
                    function callback() {
                        if (xmlhttprequest.readyState == 4 && xmlhttprequest.status == 200) {
                            var res = JSON.parse(xmlhttprequest.responseText);
                            if (res.errcode == 0) {
                                $('#editor').summernote('insertImage', res.img);
                            } else {
                                swal({
                                    txt: decodeURI(res.errmsg),
                                    title: "",
                                });
                            }
                        }
                    }
                }
                var see_doctor = getHrefParms("edit_doctor");
                self.id = see_doctor.id;
                $.ajax({
                    type: 'POST',
                    url: "edit_doctor.jsp",
                    data: {
                        act: "show_doctor",
                        id:self.id,
                    },
                    success: function(res) {
                        res = JSON.parse(res);
                        if (res.errcode == 0) {
                            self.doctor_detail = res.expert;
                            if(self.doctor_detail.isExpert==0){
                                $('.doctor_time').hide();
                            }
                            var sHTML = decodeURI(self.doctor_detail.content);
                            $('.note-editable').html(sHTML) ;
                        } else {
                            swal("没有相关数据");
                        }
                    },
                });
                <%--上传图片--%>
                var img_url="";
                $('.mes_add_image_input').change(function(e){
                    <%--图片预览--%>
                    UpladFile(e.target);
                    var file=e.target.files[0]
                    var img=new Image();
                    img.src=URL.createObjectURL(file);
                    var url=img.src;
                    var $img=$(img);
                    img.onload=function(){
                        URL.revokeObjectURL(url);
                        $('.doctor_up_load_img').empty().append($img);
                    }
                })
                // <%--上传文件--%>
                function UpladFile(obj) {
                    var objVal = $(obj).val();
                    var name = objVal.split("\\")[2];
                    var tail = name.split(".")[1];
                    if(tail=="jpg"||tail=="png"||tail=="jpeg"){
                        var fileObj = obj.files[0]; 						// js 获取文件对象
                        var FileController = "http://cloud.eeesys.com/pu/upload.php";                    // 接收上传文件的后台地址
                        // FormData 对象
                        var form = new FormData();
                        form.append("author", "hooyes");                    // 可以增加表单数据
                        form.append("act", "file");                    // 可以增加表单数据
                        form.append("file", fileObj);                       // 文件对象
                        // XMLHttpRequest 对象
                        var xhr = new XMLHttpRequest();
                        xhr.open("post", FileController, true);
                        xhr.onload = function (res) {
                            var rr = JSON.parse(xhr.responseText);
                            var timestamp = Date.parse(new Date()) + "";
                            self.doctor_detail.head_image =rr.url;
                        };
                        xhr.send(form);
                        return;
                    }
                    else{
                        $(obj).val('');
                        swal("只支持jpg和png的图片格式");
                        return;
                    }
                }
            },
            methods:{
                change_a:function(){
                    var self = this;
                    if(self.doctor_detail.isExpert == 1){
                        $('.doctor_time').show();
                    }else{
                        $('.doctor_time').hide();
                    }
                },
                get_second_depts:function(){
                    var self=this;
                    $.ajax({
                        type: 'post',
                        url: "add_doctor.jsp",
                        data: {
                            act:"second_depts",
                            deptCode:self.first_deptcode
                        },
                        timeout: 3000,
                        dataType: 'json',
                        success:function (res) {
                            if(res.errcode==0){
                                self.second_depts=res.depts;
                            }else{
                                swal('没有一级科室列表数据')
                            }
                            //console.log(data)
                        },
                        error:function (error) {
                            swal('没有一级科室列表数据')
                        }
                    });
                },
                choose_first_depts:function(){
                    var self=this;
                    self.first_deptcode = $('.par_choose_select option:selected').attr('deptCode');
                    console.log(self.first_deptcode);
                    self.get_second_depts()
                },
                submit:function(){
                    var self = this;
                    if($('.doc_name_input').val ==""){
                        swal('医生姓名不能为空');
                        return;
                    };
                    var sHTML = $('.note-editable').html();
                    $.ajax({
                        type: 'POST',
                        url: "edit_doctor.jsp",
                        data:{
                            act:'update_doctor',
                            sex:self.doctor_detail.sex,
                            id:self.doctor_detail.id,
                            level:self.doctor_detail.title,
                            isExpert:self.doctor_detail.isExpert,
                            name:self.doctor_detail.name,
                            doctorCode:self.doctor_detail.expertId,
                            time:self.doctor_detail.time,
                            specialty:self.doctor_detail.specialty,
                            content:encodeURI(sHTML.replace(/"/g, "'")),
                            head_image:self.doctor_detail.head_image
                        },
                        success: function(res) {
                            res = JSON.parse(res);
                            if (res.errcode == 0) {
                                location.href="see.jsp";
                            } else if(res.errcode == 30041){
                                swal("改医生不存在")
                            }
                        }
                    });
                },
                back:function(){
                    location.href="see.jsp";
                }
            }
        }
        new Vue({
            el: "#app",
            components: {
                doctor: doctor
            }
        });
    </script>

</body>
</html>
